<!-- 变更信息 -->
<template>
  <div>
    <a-card title="变更附件" :bordered="false">
      <a-upload
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        :multiple="true"
        :file-list="fileList"
        @change="handleChange">
        <a-button icon="upload">上传附件</a-button>
        <span class="ml-10" style="color:#101010;">支持xlsx、PDF、PNG、JPG、PPT等格式文件，大小≤5M</span>
      </a-upload>
    </a-card>
    <a-card title="备注说明" :bordered="false">
      <a-form-model ref="formRef" :model="formData" :rules="formRules" layout="vertical">
        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form-model-item label="" prop="remark">
              <a-textarea v-model="formData.remark" :maxLength="200" :autosize="{ minRows: 4, maxRows: 6 }" placeholder="请输入备注说明" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-card>
  </div>
</template>

<script>
export default {
  name: 'AlterInfo',
  data() {
    return {
      formData: {
        // 备注说明
        remark: ''
      },
      formRules: {
        remark: [{ required: true, message: '请输入备注说明！', trigger: 'change' }],
      },
      fileList: [
        {
          uid: '-1',
          name: '加盖其公章的收款公司银行账号说明.pdf',
          status: 'done',
          url: 'http://www.baidu.com/xxx.png',
        },
        {
          uid: '-2',
          name: '个人签字的收款银行账户说明.pdf',
          status: 'done',
          url: 'http://www.baidu.com/xxx.png',
        },
        {
          uid: '-3',
          name: '加盖其公章的营业执照复印件.pdf',
          status: 'done',
          url: 'http://www.baidu.com/xxx.png',
        }
      ],
    };
  },
  mounted() {
  },
  methods: {
    handleChange(info) {
      let fileList = [...info.fileList];
      // 1. Limit the number of uploaded files
      //    Only to show two recent uploaded files, and old ones will be replaced by the new
      fileList = fileList.slice(-2);

      // 2. read from response and show file link
      fileList = fileList.map(file => {
        if (file.response) {
          // Component will show file.url as link
          file.url = file.response.url;
        }
        return file;
      });
      this.fileList = fileList;
    },
  }
}
</script>

<style lang="less" scoped>
</style>